<template>
  <div>
    <div class="search-bar">
      <el-input
        v-model="specParamPage.key"
        clearable
        placeholder="请输入规格参数名称"
        style="width: 300px"
        class="filter-item"
        @keyup.enter.native="handleSpecParamFilter"
      />

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSpecParamFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit" @click="specParamDialogVisible = true">
        新增
      </el-button>
      <el-button :loading="specParamTableDownloadLoading" class="filter-item" type="primary" icon="el-icon-download">
        导出
      </el-button>
    </div>

    <!-- 查询结果表格 -->
    <el-table v-loading="specParamTableLoading" :data="specParamTableData" style="width: 100%">
      <el-table-column prop="specParamName" label="规格参数" />
      <el-table-column prop="isGeneric" label="是否通用" />
      <el-table-column prop="isNumric" label="是否数值" />
      <el-table-column prop="unit" label="数值单位" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleModifySpecParam(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteSpecParam(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      layout="prev, pager, next"
      :total="specParamPage.totalCount"
      @current-change="handleCurrentChange"
    />

    <!-- 对话框组件 -->
    <el-dialog title="规格参数" :visible.sync="specParamDialogVisible">
      <el-form ref="specParamForm" :model="specParamForm" :rules="specParamRules">
        <el-form-item label="参数名称" :label-width="formLabelWidth">
          <el-input v-model="specParamForm.specParamName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否通用" :label-width="formLabelWidth">
          <el-radio v-model="specParamForm.isGeneric" :label="1">是</el-radio>
          <el-radio v-model="specParamForm.isGeneric" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="是否数值" :label-width="formLabelWidth">
          <el-radio v-model="specParamForm.isNumric" :label="1">是</el-radio>
          <el-radio v-model="specParamForm.isNumric" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item v-show="specParamForm.isNumric === 1" label="数值单位" :label-width="formLabelWidth">
          <el-input v-model="specParamForm.unit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否检索" :label-width="formLabelWidth">
          <el-radio v-model="specParamForm.isSearching" :label="1">是</el-radio>
          <el-radio v-model="specParamForm.isSearching" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="取值间隔" :label-width="formLabelWidth">
          <el-input v-model="specParamForm.segments" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="specParamDialogVisible = false">取 消</el-button>
        <el-button v-loading="saveSpecParamBtnLoading" type="primary" @click="handleSaveSpecParam">保 存</el-button>
        <el-button v-loading="saveSpecParamBtnLoading" type="primary" @click="handleSaveSpecParam('close')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pagingSpecParams, saveSpecParam } from '@/api/spec'

export default {
  props: {
    specGroup: {
      type: Object,
      default: function() {
        return {}
      }
    },
    categoryId: {
      type: String,
      default: ''
    }
  },
  data() {
    /**
     * 对规格参数进行校验
     */
    const validateSpecParamName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入规格参数名称'))
      } else {
        callback()
      }
    }

    return {
      specParamTableDownloadLoading: false,

      specParamPage: {
        specGroupId: '',
        key: '',
        currentPage: 1,
        pageSize: 10,
        pageSegments: [],
        totalPages: 0,
        totalCount: 0
      },

      specParamTableLoading: false,
      specParamTableData: [],

      specParamDialogVisible: false,

      formLabelWidth: '120px',
      specParamForm: {
        categoryDTO: {
          id: ''
        },
        specGroupDTO: {
          id: ''
        },
        specParamName: '',
        isGeneric: 1,
        isNumric: 0,
        segments: '',
        isSearching: 0
      },
      specParamRules: {
        specParamName: [{ required: true, trigger: 'blur', validator: validateSpecParamName }]
      },
      saveSpecParamBtnLoading: false
    }
  },
  watch: {
    specGroup: {
      deep: true,
      handler(specGroup) {
        this.specParamPage.specGroupId = specGroup.id
        this.listSpecParams(this.specParamPage)
      }
    }
  },
  created() {
  },
  methods: {
    /**
     * 分页查询规格参数
     */
    listSpecParams(params) {
      this.specParamTableLoading = true
      pagingSpecParams(params)
        .then(res => {
          if (!res) {
            return
          }
          this.specParamPage.currentPage = parseInt(res.currentPage)
          this.specParamPage.pageSegments = parseInt(res.pageSegments)
          this.specParamPage.pageSize = parseInt(res.pageSize)
          this.specParamPage.totalPages = parseInt(res.totalPages)
          this.specParamPage.totalCount = parseInt(res.totalCount)

          if (res.rows) {
            this.specParamTableData = res.rows
          } else {
            this.specParamTableData = []
          }
        })
        .catch(res => {
          console.log(res)
        })
        .then(() => {
          this.specParamTableLoading = false
        })
    },

    /**
     * 处理单击改变当前页
     */
    handleCurrentChange(currentPage) {
      // 查询当前选择商品分类节点下的所有规则组
      this.specParamPage.currentPage = currentPage
      this.listSpecParams(this.specParamPage)
    },

    /**
     * 查询规格参数
     */
    handleSpecParamFilter() {
    },

    /**
     * 保存规格参数
     */
    handleSaveSpecParam(operType) {
      this.$refs.specParamForm.validate(valid => {
        if (!valid) {
          return
        }
        this.saveSpecParamBtnLoading = true

        // 保存规格参数
        this.specParamForm.categoryDTO.id = this.categoryId
        this.specParamForm.specGroupDTO.id = this.specGroup.id
        saveSpecParam(this.specParamForm)
          .then((res) => {
            this.listSpecParams(this.specParamPage)
          })
          .catch((err) => {
            console.log(err)
          })
          .then(res => {
            if (operType === 'close') {
              this.resetSpecParamForm()
              this.specParamDialogVisible = false
            }
            this.saveSpecParamBtnLoading = false
          })
      })
    },

    /**
     * 编辑规格组
     */
    handleEditSpecGroup() {
    },

    /**
     * 删除规格组
     */
    handleDeleteSpecGroup(index, row) {
      this.$confirm('此操作将永久删除该规格组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(index)
        console.log(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /**
     * 重置规则组表单
     */
    resetSpecParamForm() {
      this.specParamForm.categoryDTO.id = ''
      this.specParamForm.specGroupDTO.id = ''
      this.specParamForm.specParamName = ''
      this.specParamForm.isGeneric = 1
      this.specParamForm.isNumric = 0
      this.specParamForm.unit = ''
      this.specParamForm.segments = ''
      this.specParamForm.isSearching = 0
    }
  }
}
</script>
<style scoped>
</style>
